<template>
  <div id="main"></div>
</template>

<script>
import * as zrender from "zrender";
import AnimatePlayer from './animationPlayer'
export default {
    mounted(){
        window.zrender = zrender
        this.zr = zrender.init(document.getElementById("main"));
        this.AnimatePlayer = new AnimatePlayer();

        this.rect = new zrender.Rect({
            shape: {
                x: 100,
                y: 100,
                width: 200,
                height: 200,
                r: [10,10,0,0],
            },
            style:{
                stroke: '#f00',
                fill: '#ccc'
            }
        })
        this.zr.add(this.rect)

        
        window.zhq = this;

        // 测试group的position
        this.AnimatePlayer.add('1', this.rect, {
            shape: {
                x: [100, 200],
                y: [100, 400],
            },
            style:{
                opacity: [0,1]
            }
        }, 1000, 2000)
        this.AnimatePlayer.add('2', this.rect, {
            shape: {
                x: [200, 200],
                y: [400, 400],
            },
            style:{
                opacity: [1,0]
            }
        }, 2500, 3500)


        

        var now = 0;
        var clock = setInterval(() => {
            now += 17;
            this.AnimatePlayer.seek(now)
            if(now > 4000) clearInterval(clock);
        }, 17);
        // this.AnimatePlayer.seek(900)
    }
}
</script>

<style scoped>
#main {
  width: 80vw;
  height: 90vh;
  border: 1px solid #ccc;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
</style>